<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>AJXA封装</title>
</head>
<body>
    <script>
        function ajax(method, url, params,toDo){
            method = method.toUpperCase(); 
            var xhr = new XMLHttpRequest();
            // 将object的类型转换成String类型
            if (typeof params == 'object') {
                // 这里用字符串拼接速度慢 用数组
                var tmpArr = [];
                for(var key in params){
                    var value = params[key];
                    tmpArr.push(key + '=' + value);
                }
                // tmpArr ==> ['key1=value1','key2=value2'] 
                params = tmpArr.join('&');
                // params ==>  'key1=value1&key2=value2'
            }
            params = params || null;
            if (method == "GET") {
                url += '?' + params;
            }
            xhr.open(method,url);

            if (method == "POST") {
                xhr.setRequestHeader('Content-type','applicaton/x-www-form-urlencoded');
            }
            xhr.send(params);
            // 封装函数得注意一点 函数内部调用另外一个函数 得到返回值不是自己的返回值 得写在外面
            // ************************************
            // 由于这个函数是有延迟的  而且代码是异步执行的 所以不能通过参数传递 将结果传到外函数
            // 此时就得使用 委托  即调用者告诉委封装者：你拿到结果没办法返回给我 那么我告诉你(拿着结果去干什么)
            console.log("之前");
            xhr.onreadystatechange=function(){
                if (this.readyState == 4) {
                    toDo();
                    console.log("确实接到委托了");
                }
            };
            console.log("之后");
            // return 
        };
        var toDo = function echo(){
            console.log("任务委托给你了");
        };
        ajax("get","http://127.0.0.1/AJAX_project/time.php",{},toDo)
    </script>
    
</body>
</html>